---
title: File Input
description: The FileInput is used to prompt a user to select a single file or multiple files.
group: Inputs
keywords: [preview, image, video, upload]
components: [FileInput]
---

# File Input

A `FileInput` is used to prompt a user to select a single file or multiple files which can be:

- Previewed client side
- Sent to the server for processing

## Simple File Input

A `FileInput` includes all the styles from the [Button component](/components/button)
but defaults to a primary themed icon button with an accessible label of
`Upload` and an upload icon. If `children` are passed to the `FileInput`, it
will be rendered as a primary themed text button with an upload icon before the
`children`.

> !Warn! Unlike the native `<input type="file">`, the current selected file will not be shown.
> Check out the examples below to see how to control the value.

```demo source="./SimpleFileInput.tsx"

```

### Custom Icon Label

A custom label for the icon-only file input can be configured by providing one
of: `srOnlyLabel`, `aria-label`, `aria-labelledby`.

```demo source="./CustomIconLabel.tsx"

```

### Custom Icon

The `FileInput` component will use the
[upload](/customization/icon-config#upload) from the `ICON_CONFIG` by default.
The icon can be configured globally by following the [customizing icons](/customization/icon-config)
guide or adding the icon as the `icon` prop.

```demo source="./CustomIcon.tsx"

```

## Responsive File Input

Just like a [responsive button](/components/button#responsive-button), a `FileInput`
can be rendered as an icon only on phones and include a label on larger screens.

```demo source="./ResponsiveFileInput.tsx"

```

## Client Side Validation and Previews

Check out the [useFileUpload](/hooks/use-file-upload) documentation for more
information around how to implement client side file uploads to handle:

- validation of file types
- validation of file size (including total select size for multiple files)
- previewing files

### Controlled File Input

If the `useFileUpload` is too complex for the current use case, the value can be
controlled like normal input elements.

```demo source="./ControlledFileInput.tsx"

```
